<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <title>Title</title>
    <style>
        .p1 a{
          width: 40px;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background: orangered;
            color: white;
            font-size:6px;
            text-decoration:none;
        }
        .p1 a:hover{
            background: #333;
        }
        #pfenye{
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background-color: white;
            margin: 0px;
        }
    </style>
</head>
<body>
<%@include file="index.jsp"%>
<h1 align="center">分页显示</h1>
<form id="f1" action="${pageContext.request.contextPath}/pageByCond" method="post">

    <input  type="hidden" name="page" value="1" id="page1"/>
    <input  type="hidden" name="size" value="5" id="size1"/>

    <p style="text-align: center">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        用户名:<input id="username" type="text" name="username" size="25" value="${param.username}" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        性别:
        <input type="radio" name="gender" value="nan" ${param.gender == 'nan'?'checked':''}/>男
        <input type="radio" name="gender" value="nv" ${param.gender == 'nv'?'checked':''}/>女
        <input id="gender" type="radio" name="gender" value="" ${empty param.gender ?'checked':''}/>男女都选
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        城市:
        <select name="type" id="type">
            <option value="">无</option>
            <option value="黑铁客户"${param.city == '黑铁客户'?'selected':''}>黑铁客户</option>
            <option value="青铜客户"${param.city == '青铜客户'?'selected':''}>青铜客户</option>
            <option value="黄金客户"${param.city == '黄金客户'?'selected':''}>黄金客户</option>
            <option value="钻石客户"${param.city == '钻石客户'?'selected':''}>钻石客户</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="条件查询" onclick="tiao(1)"/>
        <input type="button" value="重置" onclick="ccc()" />
    </p>
</form>

    <table border="1" cellspacing="0" cellpadding="15" align="center">
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>性别</th>
            <th>生日</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>爱好</th>
            <th>类型</th>
            <th>介绍</th>
        </tr>
       <c:forEach items="${requestScope.page.list}" var="user" varStatus="stat">
           <tr>
               <td>${stat.index+1}</td>
               <td>${user.username}</td>
               <td>${user.gender}</td>
               <td>${user.birthday}</td>
               <td>${user.phonenum}</td>
               <td>${user.email}</td>
               <td>${user.hobby}</td>
               <td>${user.type}</td>
               <td>${user.introduce}</td>
           </tr>
       </c:forEach>
    </table>

<p id="pfenye" class="p1" style="text-align: center;color:red;">共${page.total}条 共${page.pages}页 每页显示 <select onchange="tiao(1)" name="size" id="sizeId">
    <option value="2" ${page.pageSize == '2'?'selected':''}>2</option>
    <option value="5" ${page.pageSize == '5'?'selected':''}>5</option>
    <option value="10" ${page.pageSize == '10'?'selected':''}>10</option>
    <option value="20" ${page.pageSize == '20'?'selected':''}>20</option>
</select> 条

    <c:if test="${!page.isFirstPage}">
    <a href="javaScript:void(0);" onclick="tiao(1)">首页</a>
    <a href="javaScript:void(0);" onclick="tiao(${page.prePage})">上一页</a>
    </c:if>

    <c:forEach begin="${page.navigateFirstPage}" end="${page.navigateLastPage}" var="num">
        <c:if test="${num == page.pageNum}">
            --${num}--
        </c:if>
        <c:if test="${num != page.pageNum}">
            <a href="javaScript:void(0);" onclick="tiao(${num})">${num}</a>
        </c:if>
    </c:forEach>
    <c:if test="${!page.isLastPage}">
    <a href="javaScript:void(0);" onclick="tiao(${page.nextPage})">下一页</a>
    <a href="javaScript:void(0);" onclick="tiao(${page.pages})">尾页</a>
    </c:if>
    跳转到 <input value="${page.pageNum}" type="number" max="20" min="1" step="1" name="page" id="page" onchange="huan(this)"/> 页 </p>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
<script>
    //1 替换问号
    //2 首页 上一页 可以点击
    //3 把 jsp页面展示的所有数据都封装到一个对象身上

    //4 显示当前页的前5页 和  后5页  5 6 7 8 9   10  11  12  13 14 15     11
    //5 判断  如果总页码 <=   11    都显示   1  总结码
    //6 else  总页码是 > 11        当前页 <= 5      4        1 2 3 .....11
    //7     当前页 >=  总页码-4      20        16  17  18  19  20        总页码 -10     10 总页码 20
    function tiao(page) {
        var select = document.getElementById("sizeId");
        var size = select.value;

        document.getElementById("page1").value = page;
        document.getElementById("size1").value = size;

        var form = document.getElementById("f1");
        form.submit();
    }

    function huan(obj) {
       var page =  obj.value;
       if(page > ${page.pages}){
           page = ${page.pages}
       }
       tiao(page);
    }

    function ccc(){
        document.getElementById("username").value = "";
        $("#gender").prop("checked",true);
        document.getElementById("type").value = "";

    }
</script>
</html>
